<template>
  <CommonPage show-footer :show-header="false">
    <!-- 基本信息 -->
    <div class="box mb-15">
      <div class="title">基本信息</div>

      <actions
        akey="baseInfo"
        :disabled="!checkIsAuth('baseInfoEdit')"
        :isEdit="isEdit"
        @edit="onEdit('baseInfo')"
        @cancel="cancelSubmit('baseInfo')"
        @confirm="submitForm('baseInfo')"
      >
        <template #right>
          <div v-if="!isEdit['baseInfo']">
            <n-button style="width: 100px" @click="showHistory">
              历史记录
            </n-button>
          </div>
        </template>
      </actions>

      <n-form
        ref="elModel"
        class="model-form"
        label-placement="left"
        label-width="120"
        :model="model"
        :disabled="!isEdit['baseInfo']"
      >
        <div class="flex">
          <n-form-item
            label="姓名"
            path="name"
            :rule="{
              required: true,
              message: '请输入姓名',
            }"
          >
            <n-input
              clearable
              placeholder="请输入姓名"
              v-model:value="model.name"
            />
          </n-form-item>
          <n-form-item
            label="年龄"
            path="age"
            :rule="{
              required: true,
              message: '请输入年龄',
            }"
          >
            <n-input-number
              clearable
              placeholder="请输入年龄"
              v-model:value="model.age"
            />
          </n-form-item>
          <n-form-item
            label="身份证"
            path="idCard"
            :rule="{
              required: true,
              message: '请输入身份证',
            }"
          >
            <n-input
              clearable
              placeholder="请输入身份证"
              v-model:value="model.idCard"
            />
          </n-form-item>
          <n-form-item
            label="残疾人证编号"
            path="disabilityIdCard"
            :rule="{
              required: true,
              message: '请输入残疾人证编号',
            }"
          >
            <n-input
              clearable
              placeholder="请输入残疾人证编号"
              v-model:value="model.disabilityIdCard"
            />
          </n-form-item>
        </div>
        <div class="flex">
          <n-form-item
            label="性别"
            path="gender"
            :rule="{
              required: true,
              message: '请选择性别',
            }"
          >
            <n-select
              clearable
              filterable
              placeholder="请选择性别"
              :options="getOptions('GENDER')"
              v-model:value="model.gender"
            />
          </n-form-item>
          <n-form-item
            label="居委"
            path="neighborhoodCommittee"
            :rule="{
              required: true,
              message: '请选择居委',
            }"
          >
            <n-select
              clearable
              filterable
              placeholder="请选择居委"
              :options="juweiList"
              v-model:value="model.neighborhoodCommittee"
            />
          </n-form-item>
          <n-form-item
            label="有效性"
            path="dataStatus"
            :rule="{
              required: true,
              message: '请选择有效性',
            }"
          >
            <n-select
              clearable
              filterable
              placeholder="请选择有效性"
              :options="getOptions('dataStatus')"
              v-model:value="model.dataStatus"
            />
          </n-form-item>
          <n-form-item
            label="数据状态"
            path="movingInOutStatus"
            :rule="{
              required: true,
              message: '请选择数据状态',
            }"
          >
            <n-select
              clearable
              filterable
              placeholder="请选择数据状态"
              :options="getOptions('movingInOutStatus')"
              v-model:value="model.movingInOutStatus"
            />
          </n-form-item>
        </div>
        <!-- <div>
          <n-form-item
            label="户籍地址"
            path="address"
            :rule="{
              required: true,
              message: '请输入户籍地址',
            }"
          >
            <n-input
              clearable
              placeholder="请输入户籍地址"
              v-model:value="model.address"
            />
          </n-form-item>
        </div> -->
      </n-form>
    </div>

    <!-- 残疾情况 -->
    <div class="box mb-15">
      <div class="title">残疾情况</div>

      <actions
        akey="disabilitySituation"
        :disabled="!checkIsAuth('disabilitySituationEdit')"
        :isEdit="isEdit"
        @edit="onEdit('disabilitySituation')"
        @cancel="cancelSubmit('disabilitySituation')"
        @confirm="submitForm('disabilitySituation')"
      ></actions>

      <n-form
        class="canji-form"
        ref="elCanji"
        label-placement="left"
        label-width="100"
        :model="canji"
        :disabled="!isEdit['disabilitySituation']"
      >
        <div class="flex">
          <n-form-item
            label="是否持证"
            path="certificateStatus"
            :rule="{
              required: true,
              message: '请选择是否持证',
            }"
          >
            <n-select
              clearable
              placeholder="请选择是否持证"
              :options="getOptions('cmmonYesNo')"
              v-model:value="canji.certificateStatus"
            />
          </n-form-item>
          <n-form-item
            label="残疾信息"
            path="disabilityInfoList"
            :rule="{
              required: true,
              message: '请选择残疾信息',
            }"
          >
            <n-cascader
              multiple
              clearable
              placeholder="请选择残疾信息"
              showPath
              check-strategy="child"
              :options="getOptions('disabilityCategory', 'level')"
              v-model:value="canji.disabilityInfoList"
            />
          </n-form-item>
        </div>
        <div class="flex">
          <n-form-item label="同户残疾" path="isSameHouseholdDisability">
            <n-select
              placeholder=""
              disabled
              :options="getOptions('cmmonYesNo')"
              v-model:value="canji.isSameHouseholdDisability"
            />
          </n-form-item>
          <n-form-item label="持证名称" path="certificateName">
            <n-input
              placeholder=""
              disabled
              v-model:value="canji.certificateName"
            />
          </n-form-item>
        </div>
        <div class="flex">
          <n-form-item
            label="联系人"
            path="guardianName"
            :rule="{
              required: true,
              message: '请输入联系人',
            }"
          >
            <n-input
              placeholder="请输入联系人"
              v-model:value="canji.guardianName"
            />
          </n-form-item>
          <n-form-item
            label="联系电话"
            path="guardianTel"
            :rule="{
              required: true,
              message: '请输入联系电话',
            }"
          >
            <n-input
              placeholder="请输入联系电话"
              v-model:value="canji.guardianTel"
            />
          </n-form-item>
        </div>
      </n-form>
    </div>

    <!-- 用户标签 -->
    <div class="box mb-15">
      <div class="title">用户标签</div>

      <actions
        akey="userTag"
        :disabled="!checkIsAuth('userTagEdit')"
        :isEdit="isEdit"
        @edit="onEdit('userTag')"
        @cancel="cancelSubmit('userTag')"
        @confirm="submitForm('userTag')"
      ></actions>

      <ul>
        <li
          class="tag"
          v-for="(v, i) in tags"
          :class="v.value ? 'success' : 'error'"
          :key="i"
        >
          <div class="name">{{ v.name }}</div>
          <div class="icon" v-if="isEdit['userTag']">
            <n-switch
              size="small"
              :checked-value="1"
              :unchecked-value="0"
              v-model:value="v.value"
            ></n-switch>
          </div>
          <div class="icon" v-else>
            <TheIcon
              class="cl-success"
              icon="mdi:success"
              :size="18"
              v-if="v.value"
            />
            <TheIcon class="cl-error" icon="ic:sharp-close" :size="18" v-else />
          </div>
        </li>
      </ul>
    </div>

    <div class="flex mb-15">
      <!-- 补贴情况 -->
      <div class="box flex-1 flex-fs-0 mr-15">
        <div class="title">补贴情况</div>

        <actions
          akey="subsidySituationList"
          :disabled="!checkIsAuth('subsidySituationEdit')"
          :isEdit="isEdit"
          @edit="onEdit('subsidySituationList')"
          @cancel="cancelSubmit('subsidySituationList')"
          @confirm="submitForm('subsidySituationList')"
        ></actions>

        <ul class="flex flex-wrap">
          <li
            class="flex flex-center mb-30"
            style="width: 50%"
            v-for="(v, i) in buties"
            :key="i"
          >
            <div class="name ta-right mr-10" style="width: 80px">
              {{ v.name }}
            </div>

            <div
              v-if="isEdit['subsidySituationList'] && [1, 2].includes(v.status)"
            >
              <n-switch
                size="small"
                :checked-value="1"
                :unchecked-value="2"
                v-model:value="v.status"
              ></n-switch>
            </div>

            <template v-else>
              <TheIcon
                class="cl-info"
                icon="gg:remove"
                :size="18"
                v-if="v.status == 0"
              />

              <TheIcon
                class="cl-success"
                icon="mdi:success-circle-outline"
                :size="20"
                v-else-if="v.status == 1"
              />

              <TheIcon
                class="cl-error"
                icon="ic:outline-info"
                :size="20"
                v-else-if="v.status == 2"
              />
            </template>
          </li>
        </ul>

        <ul class="flex flex-center">
          <li class="flex flex-cc">
            <TheIcon
              class="mr-5 cl-success"
              icon="mdi:success-circle-outline"
              :size="20"
            />
            <div>已领</div>
          </li>
          <li class="flex flex-cc ml-20 mr-20">
            <TheIcon class="mr-5 cl-info" icon="gg:remove" :size="18" />
            <div>不可领</div>
          </li>
          <li class="flex flex-cc">
            <TheIcon class="mr-5 cl-error" icon="ic:outline-info" :size="20" />
            <div>应领未领</div>
          </li>
        </ul>
      </div>

      <!-- 就业信息 -->
      <div class="box flex-1 flex-fs-0">
        <div class="title">就业信息</div>

        <actions
          akey="employmentInfoList"
          :disabled="!checkIsAuth('employmentInfoEdit')"
          :isEdit="isEdit"
          @edit="onEdit('employmentInfoList')"
          @cancel="cancelSubmit('employmentInfoList')"
          @confirm="submitForm('employmentInfoList')"
        >
          <template #right>
            <div v-if="isEdit['employmentInfoList']">
              <n-button
                style="width: 100px"
                :disabled="!checkIsAuth('employmentInfoAdd')"
                @click="showWorkModal(null, 0, 1)"
              >
                新增
              </n-button>
            </div>
          </template>
        </actions>

        <n-table :single-line="false" v-if="works.length">
          <thead>
            <tr>
              <th>序号</th>
              <th>开始时间</th>
              <th>结束时间</th>
              <th>工作单位</th>
              <th style="width: 100px" v-if="isEdit['employmentInfoList']">
                操作
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v, i) in works" :key="i">
              <td>{{ i + 1 }}</td>
              <td>{{ v.startDate }}</td>
              <td>{{ v.endDate }}</td>
              <td>{{ v.workUnit }}</td>
              <td style="width: 100px" v-if="isEdit['employmentInfoList']">
                <span
                  class="cl-primary td-under click mr-10"
                  @click="showWorkModal(v, i, 2)"
                >
                  编辑
                </span>
                <span class="cl-primary td-under click" @click="delWork(i)">
                  删除
                </span>
              </td>
            </tr>
          </tbody>
        </n-table>

        <div class="flex flex-center mt-30" v-else>
          <n-empty>暂无数据</n-empty>
        </div>
      </div>
    </div>

    <!-- 信息提醒 -->
    <div class="box mb-15" style="min-height: 300px">
      <div class="title">信息提醒</div>
      <n-table :single-line="false" v-if="tips.length">
        <tbody>
          <tr v-for="(v, i) in tips" :key="i">
            <td class="flex flex-cc">
              <TheIcon
                class="mr-5 cl-error"
                icon="ic:outline-info"
                :size="20"
              />
            </td>
            <td>应领未领</td>
            <td>{{ v.name }}</td>
            <td>原因: {{ v.reason }}</td>
          </tr>
        </tbody>
      </n-table>

      <div class="flex flex-center mt-100" v-else>
        <n-empty>暂无数据</n-empty>
      </div>
    </div>

    <!-- 信息日志 -->
    <div class="box" style="min-height: 300px">
      <div class="title">信息日志</div>
      <CrudTable
        ref="$table1"
        v-model:query-items="queryItems1"
        :extra-params="extraParams1"
        :columns="columns1"
        :get-data="api.getLogList"
        :is-title="false"
      >
      </CrudTable>
    </div>

    <!-- 历史数据弹窗 -->
    <n-modal
      style="width: 1200px"
      title="历史数据"
      preset="dialog"
      :show-icon="false"
      v-model:show="historyVisible"
    >
      <CrudTable
        ref="$table2"
        v-model:query-items="queryItems2"
        :extra-params="extraParams2"
        :columns="columns2"
        :get-data="api.getUserDetailHistory"
        :is-title="false"
      >
        <template #queryBar>
          <QueryBarItem label="日期范围" :label-width="70">
            <BaseDateRange
              type="daterange"
              value-format="yyyy/MM/dd"
              v-model:startDate="queryItems2.startDate"
              v-model:endDate="queryItems2.endDate"
            ></BaseDateRange>
          </QueryBarItem>
        </template>
      </CrudTable>
    </n-modal>

    <!-- 就业信息弹窗 -->
    <n-modal
      style="width: 500px"
      preset="dialog"
      :title="workModalType === 1 ? '新建就业信息' : '编辑就业信息'"
      :show-icon="false"
      v-model:show="workModalVisible"
    >
      <n-form ref="modalFormRef" class="mt-30" :model="workModel">
        <n-form-item
          path="workUnit"
          label="工作单位"
          :rule="[
            {
              required: true,
              message: '请输入工作单位',
            },
          ]"
        >
          <n-input
            clearable
            placeholder="请输入工作单位"
            v-model:value="workModel.workUnit"
          />
        </n-form-item>
        <n-form-item
          path="startDate"
          label="日期范围"
          :rule="[
            {
              required: true,
              message: '请选择日期范围',
            },
          ]"
        >
          <BaseDateRange
            style="width: 100%"
            type="daterange"
            value-format="yyyy-MM-dd"
            v-model:startDate="workModel.startDate"
            v-model:endDate="workModel.endDate"
          ></BaseDateRange>
        </n-form-item>
        <n-form-item class="flex flex-rr">
          <n-button class="mr-15" @click="workModalVisible = false">
            取消
          </n-button>
          <n-button type="primary" @click="confirmWork">确认</n-button>
        </n-form-item>
      </n-form>
    </n-modal>
  </CommonPage>
</template>

<script setup>
import { onMounted } from 'vue'
import api from './api'
import { NButton } from 'naive-ui'
import { getOptions, checkIsAuth } from '@/utils'

import actions from './components/actions.vue'

const route = useRoute()

// 编辑
const isEdit = ref({
  baseInfo: false,
  disabilitySituation: false,
  userTag: false,
  subsidySituationList: false,
  employmentInfoList: false,
})

const prevModel = ref({
  baseInfo: {},
  disabilitySituation: {},
  userTag: {},
  subsidySituationList: [],
  employmentInfoList: [],
})

// 基本信息
const elModel = ref(null)
const model = ref({})

// 残疾情况
const elCanji = ref(null)
const canji = ref({})

// 用户标签
const tagId = ref(null)
const tags = ref([
  {
    id: 'isDiBao',
    name: '低保',
    value: '',
  },
  {
    id: 'isDiShouRu',
    name: '低收入',
    value: '',
  },
  {
    id: 'isLianZuFang',
    name: '廉租房',
    value: '',
  },
  {
    id: 'isJuBao',
    name: '居保',
    value: '',
  },
  {
    id: 'isZhongCanWuYe',
    name: '重残无业',
    value: '',
  },
  {
    id: 'isWuYe',
    name: '无业',
    value: '',
  },
  {
    id: 'isShiDu',
    name: '失独',
    value: '',
  },
  {
    id: 'isTeKun',
    name: '特困',
    value: '',
  },
  {
    id: 'isLiXiuGanBu',
    name: '离休干部',
    value: '',
  },
  {
    id: 'isGuEr',
    name: '孤儿',
    value: '',
  },
])

// 补贴情况
const buties = ref([])

// 就业信息
const works = ref([])

// 信息提醒
const tips = ref([])

// 信息日志
const $table1 = ref(null)
const queryItems1 = ref({})
const extraParams1 = ref({
  PId: route.query.id,
})
const columns1 = [
  {
    title: '发生时间',
    key: 'createTime',
    width: 150,
  },
  {
    title: '数据来源',
    key: 'dataSource',
    width: 150,
  },
  {
    title: '操作人',
    key: 'createUser',
    width: 150,
  },
  {
    title: '类型',
    key: 'dataType',
    width: 150,
  },
  {
    title: '原数据',
    key: 'originalData',
    width: 300,
    ellipsis: { tooltip: true },
  },
  {
    title: '新数据',
    key: 'newData',
    ellipsis: { tooltip: true },
  },
]

// 历史数据弹窗
const historyVisible = ref(false)
const $table2 = ref(null)
const queryItems2 = ref({
  startDate: null,
  endDate: null,
})
const extraParams2 = ref({
  pId: route.query.id,
})
const columns2 = [
  {
    title: '版本ID',
    key: 'id',
    width: 180,
  },
  {
    title: '修改前内容',
    key: 'originalData',
    width: 300,
    ellipsis: { tooltip: true },
  },
  {
    title: '修改后内容',
    key: 'newData',
    width: 300,
    ellipsis: { tooltip: true },
  },
  {
    title: '修改人',
    key: 'createUser',
  },
  {
    title: '操作',
    key: 'actions',
    width: 100,
    fixed: 'right',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'primary',
            size: 'small',
            secondary: true,
            onClick: () => {
              getUserDetail(row.peopleDetail)
              historyVisible.value = false
            },
          },
          {
            default: () => '选择',
          }
        ),
      ]
    },
  },
]

// 就业信息弹窗
const workModel = ref({
  workUnit: '',
  startDate: null,
  endDate: null,
})
const modalFormRef = ref(null)
const workModalType = ref(1)
const workModalIndex = ref(0)
const workModalVisible = ref(false)

// 居委列表
const juweiList = ref([])

onMounted(() => {
  getJuweiList()
  getUserDetail()
  $table1.value?.handleQuery()
})

// 获取居委下拉列表
async function getJuweiList() {
  const { code, data } = await api.getJuweiList()

  if (code === 200) {
    const list = data.map((v) => {
      return {
        label: v,
        value: v,
      }
    })

    juweiList.value = list
  }
}

// 获取人员详情
async function getUserDetail(peopleDetail) {
  let data = {}

  if (peopleDetail) {
    data = peopleDetail
  } else {
    const params = {
      id: route.query.id,
      idCard: route.query.idCard,
    }

    const { code, data: peopleDetail } = await api.getUserDetail(params)

    if (code === 200) {
      data = peopleDetail
    }
  }

  const {
    baseInfo,
    disabilitySituation,
    userTag,
    subsidySituationList,
    employmentInfoList,
  } = data

  // 基本信息
  model.value = {
    name: baseInfo.name,
    age: baseInfo.age,
    idCard: baseInfo.idCard,
    disabilityIdCard: baseInfo.disabilityIdCard,
    gender: baseInfo.gender,
    neighborhoodCommittee: baseInfo.neighborhoodCommittee,
    dataStatus: baseInfo.dataStatus ? String(baseInfo.dataStatus) : null,
    movingInOutStatus: baseInfo.movingInOutStatus
      ? String(baseInfo.movingInOutStatus)
      : null,
  }

  // 残疾情况
  canji.value = disabilitySituation
  canji.value.certificateStatus = canji.value.certificateStatus
    ? String(canji.value.certificateStatus)
    : null
  canji.value.isSameHouseholdDisability = canji.value.isSameHouseholdDisability
    ? String(canji.value.isSameHouseholdDisability)
    : null

  // 用户标签
  tagId.value = userTag.id
  tags.value.forEach((v) => {
    for (const key in userTag) {
      if (v.id === key) {
        v.value = userTag[key] ? 1 : 0
      }
    }
  })

  // 补贴情况
  buties.value = subsidySituationList.map((v) => {
    return {
      ...v,
      status: v.status || 0,
    }
  })

  // 就业信息
  works.value = employmentInfoList

  // 信息提醒
  tips.value = subsidySituationList.filter((v) => v.status === 2 && v.reason)
}

// 修改人员详情
function submitForm(key = 'baseInfo') {
  if (key === 'baseInfo') {
    elModel.value.validate(async (errs) => {
      if (!errs) {
        const params = {
          [key]: {
            id: route.query.id,
            ...model.value,
          },
        }

        updateUserDetail(params)
      }
    })
  } else if (key === 'disabilitySituation') {
    elCanji.value.validate(async (errs) => {
      if (!errs) {
        const params = {
          [key]: {
            pid: route.query.id,
            ...canji.value,
          },
        }

        updateUserDetail(params)
      }
    })
  } else if (key === 'userTag') {
    const params = {
      [key]: {
        id: tagId.value,
        pid: route.query.id,
      },
    }
    tags.value.map((v) => {
      params[key][v.id] = v.value
    })

    updateUserDetail(params)
  } else if (key === 'subsidySituationList') {
    const params = {
      [key]: buties.value,
    }

    updateUserDetail(params)
  } else if (key === 'employmentInfoList') {
    const params = {
      [key]: works.value.map((v) => {
        return {
          ...v,
          pid: route.query.id,
        }
      }),
    }

    updateUserDetail(params)
  }

  async function updateUserDetail(params) {
    const { code } = await api.updateUserDetail(params)

    if (code === 200) {
      $message.success('操作成功')
      $table1.value?.handleQuery()
      isEdit.value[key] = false
    }
  }
}

// 编辑
function onEdit(key = 'baseInfo') {
  if (key === 'baseInfo') {
    prevModel.value[key] = deepCopy(model.value)
  } else if (key === 'disabilitySituation') {
    prevModel.value[key] = deepCopy(canji.value)
  } else if (key === 'userTag') {
    prevModel.value[key] = deepCopy(tags.value)
  } else if (key === 'subsidySituationList') {
    prevModel.value[key] = deepCopy(buties.value)
  } else if (key === 'employmentInfoList') {
    prevModel.value[key] = deepCopy(works.value)
  }

  isEdit.value[key] = true
}

// 取消编辑
function cancelSubmit(key = 'baseInfo') {
  if (key === 'baseInfo') {
    model.value = deepCopy(prevModel.value[key])
  } else if (key === 'disabilitySituation') {
    canji.value = deepCopy(prevModel.value[key])
  } else if (key === 'userTag') {
    tags.value = deepCopy(prevModel.value[key])
  } else if (key === 'subsidySituationList') {
    buties.value = deepCopy(prevModel.value[key])
  } else if (key === 'employmentInfoList') {
    works.value = deepCopy(prevModel.value[key])
  }

  isEdit.value[key] = false
}

// 显示历史数据
function showHistory() {
  historyVisible.value = true
  setTimeout(() => {
    $table2.value?.handleQuery()
  }, 0)
}

// 显示就业信息弹窗
function showWorkModal(e, i, t) {
  if (e) {
    workModel.value = {
      ...e,
    }
  } else {
    workModel.value = {
      id: null,
      workUnit: '',
      startDate: null,
      endDate: null,
    }
  }

  workModalType.value = t
  workModalIndex.value = i
  workModalVisible.value = true
}

function confirmWork() {
  modalFormRef.value?.validate(async (err) => {
    if (err) return

    if (workModalType.value === 1) {
      works.value.push(workModel.value)
    } else {
      works.value[workModalIndex.value] = workModel.value
    }

    workModalVisible.value = false
  })
}

function delWork(i) {
  works.value.splice(i, 1)
}

// 深拷贝
function deepCopy(e) {
  return JSON.parse(JSON.stringify(e))
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding-top: 55px;
}

.title {
  position: absolute;
  top: 15px;
  left: 0;
  padding-left: 10px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 0 4px 4px 0;
  }
}

:deep(.actions) {
  position: absolute;
  top: 10px;
  right: 15px;
  display: flex;
  align-items: center;
}

.tag {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 50px;
  border-radius: 8px;
  text-align: center;
  line-height: 50px;
  margin: 10px;

  &.success {
    background: rgba(26, 213, 152, 0.2);
  }

  &.error {
    background: rgba(234, 58, 61, 0.2);
  }

  .icon {
    position: absolute;
    right: 15px;
    top: 5px;

    :deep(.n-switch) {
      transform: translateY(-5px);
    }
  }
}

:deep(.n-form) {
  &.model-form {
    .n-input,
    .n-select,
    .n-cascader {
      width: 200px;
    }
  }

  &.canji-form {
    .flex {
      .n-form-item {
        width: 70%;

        &:nth-child(1) {
          width: 30%;
        }

        .n-form-item-label {
          height: 50px;
          background: #f6f9fe;
          border: 1px solid #ededed;
        }

        .n-form-item-blank {
          height: 50px;

          input,
          .n-input,
          .n-select,
          .n-cascader,
          .n-base-selection,
          .n-base-selection-label,
          .n-base-selection-tags {
            width: 100%;
            height: 50px;
          }

          .n-base-selection__border {
            border-radius: 0;
          }
        }
      }
    }
  }
}

:deep(.n-switch) {
  &.n-switch--active {
    .n-switch__rail {
      background-color: #4dd865;
    }
  }
}

:deep(.n-descriptions-table-header) {
  width: 100px;
  background-color: #f5f6fb !important;
}

:deep(.n-descriptions-table-content) {
  width: 200px;
}

:deep(.n-card) {
  border: none !important;
}

:deep(.n-card__content) {
  padding: 0 !important;
  background-color: #f5f6fb !important;
}
</style>

<style lang="scss">
.n-popconfirm {
  .n-button {
    &--default-type {
      .n-button__content {
        color: black !important;
      }
    }
  }
}
</style>
